<template>
  <div>
    <Row>
      <i-col span="24">
        <Card>
          <p slot="title">
            <Icon type="stats-bars"></Icon>
            协议审核
          </p>
          <div>
            <div>
              <Form inline>
                <FormItem>
                  <i-input type="text" v-model="form.code" style="width:200px" icon="md-apps"
                           placeholder="请输入协议编码"></i-input>
                </FormItem>
                <FormItem>
                  <i-input type="text" v-model="form.name" style="width:200px" icon="md-card"
                           placeholder="请输入协议名称"></i-input>
                </FormItem>
                <FormItem>
                  <DatePicker type="daterange" v-model="form.contractDate" placeholder="请选择签约时间" style="width: 200px">
                  </DatePicker>
                </FormItem>
                <FormItem>
                  <i-input type="number" v-model="form.term" style="width:200px" icon="md-code"
                           placeholder="请输入合同期限"></i-input>
                </FormItem>
                <FormItem>
                  <Select v-model="form.protocolType" style="width:200px" placeholder="请选择协议类型">
                    <Option v-for="item in protocolTypes" :value="item.value" :key="item.value">{{ item.key }}</Option>
                  </Select>
                </FormItem>
                <FormItem>
                  <DatePicker type="daterange" v-model="form.protocolDateRange" placeholder="请选择协议时间段"
                              style="width: 200px">
                  </DatePicker>
                </FormItem>
                <FormItem>
                  <i-input type="text" v-model="form.sponsor" style="width:200px" icon="md-apps"
                           placeholder="请输入发起人姓名"></i-input>
                </FormItem>
                <FormItem>
                  <DatePicker type="daterange" v-model="form.createDate" placeholder="请选择发起时间"
                              style="width: 200px"></DatePicker>
                </FormItem>
                <FormItem>
                  <Select v-model="form.manageCom" style="width:200px" placeholder="请选择管理机构">
                    <Option v-for="item in manageComs" :value="item.value" :key="item.value">{{ item.key }}</Option>
                  </Select>
                </FormItem>
                <FormItem>
                  <Button type="primary" @click="query">查询</Button>
                </FormItem>
                <FormItem>
                  <Button @click="cancelQuery">取消</Button>
                </FormItem>
              </Form>
            </div>
            <div>
              <Table size="small" :data="data" :columns="columns"></Table>
            </div>
          </div>
        </Card>
      </i-col>
    </Row>
  </div>
</template>

<script>
  import data from '../data.js'

  export default {
    name: "schedule",
    data() {
      return {
        form: {
          code: '',
          name: '',
          contractDate: [],
          protocolDateRange: [],
          protocolType: '',
          term: '',
          sponsor: '',
          createDate: [],
          manageCom: ''
        },
        manageComs: [],
        protocolTypes: [
          {
            key: '录入中',
            value: '1'
          },
          {
            key: '审核中',
            value: '2'
          },
          {
            key: '待修改',
            value: '3'
          },
          {
            key: '已通过',
            value: '4'
          }
        ],
        cities: [],
        data: data,
        columns: [
          {
            title: '协议编码',
            key: 'code',
            width: 160,
            fixed: 'left'
          },
          {
            title: '协议名称',
            key: 'name',
            maxWidth: 1000,
            minWidth: 250
          },
          {
            title: '签约时间',
            key: 'contractDate',
            width: 120,
            sortable: true
          },
          {
            title: '合同期限（年）',
            key: 'term',
            width: 150,
            sortable: true,
            render: (h, params) => {
              return h('Tag', {
                props: {
                  color: 'cyan'
                }
              }, params.row.term + '年')
            }
          },
          {
            title: '协议时间',
            key: 'protocolDateRange',
            sortable: true,
            width: 220,
            render: (h, params) => {
              return h('span', params.row.protocolDateRange.join(' 至 '))
            }
          },
          {
            title: '发起人',
            key: 'sponsor',
            width: 80,
          },
          {
            title: '发起时间',
            key: 'createTime',
            width: 150,
          },
          {
            title: '协议状态',
            key: 'status',
            width: 120,
            render: (h, params) => {
              let list = [
                {
                  key: '1',
                  value: '录入中',
                  color: 'gold'
                },
                {
                  key: '2',
                  value: '审核中',
                  color: 'green'
                },
                {
                  key: '3',
                  value: '待修改',
                  color: 'red'
                },
                {
                  key: '4',
                  value: '已通过',
                  color: 'geekblue'
                },
              ];
              let obj;
              for (let i = 0; i < list.length; i++) {
                if (params.row.status === list[i].key) {
                  obj = list[i];
                  break
                }
              }
              return h('tag', {
                props: {
                  color: obj.color
                }
              }, obj.value)
            }
          },
          {
            title: '操作',
            key: 'action',
            width: 220,
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small',
                    disabled: params.row.enable === '1'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.viewDetail(params.row)
                    }
                  }
                }, '查看'),
                h('Button', {
                  props: {
                    type: 'success',
                    size: 'small',
                    disabled: params.row.enable === '1'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.makeSchedule(params.row)
                    }
                  }
                }, '维护'),
                h('Button', {
                  props: {
                    type: 'warning',
                    size: 'small',
                    disabled: params.row.enable === '1'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.cancelSchedule(params.row)
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'default',
                    size: 'small',
                    disabled: params.row.enable === '1'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.cancelSchedule(params.row)
                    }
                  }
                }, '复制'),
              ])
            }
          }
        ]
      }
    },
    methods: {
      query() {

      },
      cancelQuery() {

      },
      viewDetail() {

      },
      makeSchedule() {

      },
      cancelSchedule() {

      }
    }
  }
</script>

<style scoped>

</style>
